<template>
  <div>
    <div class="detail-info" style="margin-top: 40px">
      <div class="form-item">
        <h4>基本信息</h4>
        <el-form label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="内容名称">
                <span>{{this.detailData.name}}</span>
              </el-form-item>
              <el-form-item label="分公司">
                <span>{{this.detailData.branchName}}</span>
              </el-form-item>
              <el-form-item label="主广告语">
                <span>{{this.detailData.advertMain}}</span>
              </el-form-item>
              <el-form-item label="副标题">
                <span>{{this.detailData.titleVice}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="内容备注">
                <span>{{this.detailData.comment}}</span>
              </el-form-item>
              <el-form-item label="状态">
                <span>{{this.detailData.stateName}}</span>
              </el-form-item>
              <el-form-item label="副广告语">
                <span>{{this.detailData.advertVice}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="内容形式">
                <span>{{this.detailData.contentModeName}}</span>
              </el-form-item>
              <el-form-item label="排序方式">
                <span v-show="detailData.sortType === 1">常规</span>
                <span v-show="detailData.sortType === 2">品牌</span>
                <span v-show="detailData.sortType === 3">一级分类</span>
                <span v-show="detailData.sortType === 4">二级分类</span>
              </el-form-item>
              <el-form-item label="图片">
                <img :src="imgHost + '/' + detailData.advertImage" style="width:160px;height:100px;margin:5px 0" alt="">
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="detail-info" style="margin-top: 40px">
      <div class="form-item">
        <h4>上线信息</h4>
        <el-form label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="上线类型">
                <span>{{this.detailData.onlineModeName}}</span>
              </el-form-item>
              <el-form-item label="下线类型">
                <span>{{this.detailData.offlineModeName}}</span>
              </el-form-item>
              <el-form-item label="创建人">
                <span>{{this.detailData.createUser}}</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{this.detailData.createTime}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生效时间">
                <span>{{this.detailData.onlineTime}}</span>
              </el-form-item>
              <el-form-item label="生效时间">
                <span>{{this.detailData.offlineTime}}</span>
              </el-form-item>
              <el-form-item label="编辑人">
                <span>{{this.detailData.updateUser}}</span>
              </el-form-item>
              <el-form-item label="编辑时间">
                <span>{{this.detailData.updateTime}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="上线备注">
                <span>{{this.detailData.onlineComment}}</span>
              </el-form-item>
              <el-form-item label="下线备注">
                <span>{{this.detailData.offlineComment}}</span>
              </el-form-item>
              <el-form-item label="审核人">
                <span>{{this.detailData.auditor}}</span>
              </el-form-item>
              <el-form-item label="审核时间">
                <span>{{this.detailData.auditTime}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="detail-info" v-show="detailData.contentMode === 1 || detailData.contentMode === 4 || detailData.contentMode === 5">
      <el-table
        :data="detailData.newContentDatas"
        max-height="200"
        style="width: 100%"
        border>
        <el-table-column
          prop="productId"
          label="ID"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="productName"
          min-width="200"
          align="center"
          label="名称">
        </el-table-column>
      </el-table>
    </div>
    <div class="detail-info" v-show="detailData.contentMode === 2">
      <div class="form-item">
        <el-form label-width="120px">
          <el-form-item label="跳转链接">
            <span>{{detailData.link}}</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="detail-info" v-show="detailData.contentMode === 3">
      <div class="form-item">
        <el-form label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="PC页面">
                <span>{{detailData.pcName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="惠配通页面">
                <span>{{detailData.hptName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="惠付通页面">
                <span>{{detailData.hftName}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import { apiHost } from '../../../config/settings.js'
  import { column } from '../../../config/proxy.js'
  export default {
    data () {
      return {
        detailData: {
          newContentDatas: []
        }
      }
    },
    methods: {
      searchDetail (id) {
        // type 非编辑待审核传任意值
        column.content.detail({id: id, type: 2}, (res) => {
          console.log(res, '内容详情')
          if (res.message === 'ok') {
            this.detailData = res.content
          } else {
            this.message('查看详情失败', 'error')
          }
        })
      },
      timeDeltSecond (d) { // 时间去秒
        if (d) {
          return d.split(' ')[0]
        }
      },
      message (text, type) { // 消息提示
        this.$message({
          showClose: true,
          message: text,
          type: type
        })
      }
    },
    created () {
      this.imgHost = apiHost.imgHost
      this.searchDetail(this.$store.state.tab.uid)
    }
  }
</script>

